<template>
  <el-card>
    <avue-crud
      ref="crudRef"
      v-model="tableForm"
      :option="option"
      v-model:page="page"
      :table-loading="tableLoading"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @refresh-change="loadData(1)"
      @search-reset="searchChange"
      @search-change="searchChange"
      @on-load="loadData(1)"
      :data="tableData"
    >
      <!-- <template #name-form="{ type, disabled }">asdfasdfasdfasdf</template> -->
      <template #menu="{ row, size }">
        <el-button :size="size" text type="primary" @click="handleAdd(row)">
          新增子级
        </el-button>
      </template>
    </avue-crud>
  </el-card>
</template>
<script setup lang="ts">
import { AgentApi } from "@/api/agent";
import { useAvueTableMixin } from "@/mixins/avueTableMixin";
import { array2Tree } from "@/utils/index";
const crudRef = ref<any>(null);
const option = ref({
  index: true,
  searchMenuSpan: 8,
  column: [
    {
      prop: "parentId",
      label: "所属上级",
      type: "tree",
      hide: true,
      display: true,
      props: {
        label: "name",
        value: "id",
      },
      dicData: () => {
        return new Promise((resolve) => {
          AgentApi.getList({
            pageno: page.value.currentPage,
            pagesize: page.value.pageSize,
            ...params.value,
            ...staticParams.value,
          }).then((res: any) => {
            resolve(
              array2Tree(res.data as any, {
                field: "id",
                pFiled: "parentId",
              })
            );
          });
        });
      },
    },
    { prop: "country", label: "国家", type: "input" },
    { prop: "name", label: "客户名称", type: "input", search: true },
    { prop: "clientNo", label: "编号", type: "input" },
    {
      prop: "clientType",
      label: "企业类型",
      type: "select",
      dicData: [
        { label: "代理商", value: 0 },
        { label: "检测商", value: 1 },
        { label: "终端客户", value: 2 },
        { label: "设备厂家", value: 3 },
      ],
    },
    { prop: "manager", label: "联系人", type: "input" },
    { prop: "phone", label: "联系电话", type: "input" },
    { prop: "addr", label: "详细地址", type: "input" },
    {
      prop: "userName",
      label: "账号",
      type: "input",
      hide: true,
      editDisplay: false,
    },
    {
      prop: "passWord",
      label: "密码",
      type: "password",
      hide: true,
      editDisplay: false,
    },
    { prop: "clientLevel", label: "客户等级", type: "number" },
    // { prop: "province", label: "省", type: "input" },
    // { prop: "city", label: "市", type: "input" },
    // { prop: "district", label: "区", type: "input" },
  ],
});
/**
 * 获取列表数据
 * @param tempPage 临时页码，用于切换页码时，不刷新列表数据
 */
const customLoadData = (tempPage?: number) => {
  if (tempPage) {
    page.value.currentPage = tempPage;
  }
  tableLoading.value = true;
  AgentApi.getList({
    pageno: page.value.currentPage,
    pagesize: page.value.pageSize,
    ...params.value,
    ...staticParams.value,
  })
    .then((res: any) => {
      tableData.value = array2Tree(res.data as any, {
        field: "id",
        pFiled: "parentId",
      });
      page.value.total = res.total;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
const {
  tableForm,
  page,
  tableLoading,
  tableData,
  params,
  staticParams,
  loadData,
  rowSave,
  rowUpdate,
  rowDel,
  searchChange,
} = useAvueTableMixin(AgentApi, { customLoadData });
const handleAdd = (row: any) => {
  tableForm.value = {
    parentId: row.id,
  };
  if (crudRef.value) {
    crudRef.value.rowAdd();
  }
};
</script>
<style lang="scss" scoped></style>
